<template>
  <van-form
    class="mt-4 mx-2"
    validate-first
    @failed="onFailed"
    @submit="onSubmit"
  >
    <van-field
      v-model.trim="password_old"
      type="password"
      name="password_old"
      label="旧密码"
      placeholder="请输入旧密码"
      :rules="[{ required: true, message: '请输入旧密码' }]"
    />
    <!-- 通过 pattern 进行正则校验 -->
    <van-field
      v-model.trim="password"
      type="password"
      name="password"
      label="新密码"
      placeholder="请输入6位数字或字母"
      :rules="[{ pattern, message: '请输入6位数字或字母' }]"
    />
    <!-- 通过 validator 进行函数校验 -->
    <van-field
      v-model.trim="password_confirmation"
      type="password"
      label="重复新密码"
      name="password_confirmation"
      placeholder="请重复输入新密码"
      :rules="[{ validator, message: '请输入正确内容' }]"
    />

    <div class="mt-6 mx-4">
      <van-button round block type="primary" native-type="submit"
        >提 交</van-button
      >
    </div>
  </van-form>
</template>

<script>
export default {
  data() {
    return {
      password_old: '',
      password: '',
      password_confirmation: '',
      value3: '',
      pattern: /^(\w){6,20}$/,
    }
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return val && val === this.password
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
    onSubmit(values) {
      this.axios.put(`/password/reset`, values).then(res => {
        if (res.data.code === 1) {
          this.$toast.success('修改成功')
          this.$router.back()
        } else {
          this.$toast.error(res.data.msg)
        }
      })
    },
  },
}
</script>

<style>
</style>